<template>
  <div :style="{width: '64px', height:'64px'}">
    <div class="user-avatar-dropdown">
      <Dropdown @on-click="handleClick" :transfer="true">
        <Badge :dot="!!messageUnreadCount">
          <!--<Avatar :src="userAvatar"/>-->
          <Avatar :src="imgHeader" :size="48"/>
          <!--        <span class="user-name">{{loginName}}</span>-->
        </Badge>

        <Icon :size="18" type="md-arrow-dropdown"></Icon>
        <DropdownMenu slot="list">
          <DropdownItem :disabled="true">{{userInfo.fullName}}</DropdownItem>
<!--          <DropdownItem :disabled="true">1111111111111111111111111111111111111111111</DropdownItem>-->
          <DropdownItem v-for="(item,index) in userInfo.organizations"
                        :key="index" :name="item.code" :selected="item.selected" :disabled="item.disabled">
            {{ item.shortName }}
          </DropdownItem>

<!--            <Language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 20px;" :lang="local"/>-->

          <DropdownItem name="logout" divided>{{$t('exit')}}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
<!--    <img src="@/assets/images/exit.png" height="24" width="28"/></div>-->

</template>

<script>
import './user.less'
import { mapActions } from 'vuex'
import Language from '@/components/main/components/language'
//import imgHeader from '@/assets/images/yasuo.jpg'
import imgHeader from '@/assets/images/exit.png'
import {getLoginUser} from "@/libs/util";
export default {
  name: 'User',
  components:{Language},
  props: {
    loginName: {
      type: String,default: 'loginName',
    },
    userName: {
      type: String,default: 'userName',
    },
    fullName:{
      type: String,default: 'fullName',
    },
    userAvatar: {
      type: String,
      default: imgHeader,//'https://i.loli.net/2017/08/21/599a521472424.jpg'

    },
    messageUnreadCount: {
      type: Number,
      default: 0
    },
    organizations: {
      type: Array,
      default:()=>{
        return
          [{code: '00100',shortName:'智能终端',selected:true,disabled:true}]
      }
    },
  },
  computed:{
    local () {
      return this.$store.state.app.local
    },
  },
  data () {
    return {
      //userInfo:null,

      userInfo:{
        loginName: '',
        fullName: '',
        userName: '',
        userCode: '',
        userId: '',
        organizations:[],
      },
      imgHeader: imgHeader,
      //organizations:[],
      /*organizations:[
        {id: 'A0',shortName:'市公安局',selected:true,disabled:true},
        {id: 'A1',shortName:'区公安分局',selected:false,disabled:false},
        {id: 'A2',shortName:'所出所',selected:false,disabled:false},
      ],*/
    }
  },
  methods: {
    /* mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中
    * 这几个方法在 store/module/login.js中
    * */
    ...mapActions([
      'logout2',
      'clearToken',
      'loginChangeOrg',
      'setLocal'
    ]),
    logout() {
      /** logout2 在 store/module/login.js 中定义 */
      this.logout2().then(() => {
        this.clearToken();
        this.$router.push({name: 'login'})
      })
    },
    message () {
      this.$router.push({
        name: 'message_page'
      })
    },
    handleClick (name) {
      console.log(">>>>>> user.vue: handleClick name=%o",name);
      switch (name) {
        case 'logout': this.logout()
          break
        case 'message': this.message()
          break
        default : {
          this.loginChangeOrg(name).then(() => {
            this.$router.push({name: 'home'})
          })
        }
      }
    },
    relogin(){
      this.clearToken();
      this.$router.push({
        name: 'login'
      })
    },
  },

  /** 让js里直接跳转到登录页面*/
  mounted(){
    if (!window.relogin)
      window.relogin = this.relogin;
    this.$nextTick(()=> {
      //const uInfo = this.$store.getters.getUserInfo;
      this.userInfo = getLoginUser();
      //console.log(">>>>> user.vue.mounted userInfo=%o",uInfo)
/*      if (!!this.$store.getters.getUserInfo) {
        this.userInfo = uInfo
        //用户名丢失则重新登录
        //this.logout();
      }*/
    })

  }
}
</script>
<style scoped>
.user-avatar-dropdown{
  height: 64px;
}
.ivu-dropdown{

}
</style>
